<template>
  <view>
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1 u-f" style="justify-content: flex-end;">
          <view style="margin-left: 10rpx;">
            <u-button type="error" size="mini" :custom-style="customStyle" @click="showPopup=true">转黄金券</u-button>
          </view>
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>爆款券总额</view>
      <view>{{hot_amount}}</view>
    </view>

    <view class="coupons-container">
      <mescroll-body ref="mescrollRef" top="30" :down="down" @down="downCallback" @up="upCallback">
        <view class="coupon-item"
          :class="coupon.used_status === 1 ? 'used' : (coupon.used_status === 2 ? 'overdue' : 'default')"
          v-for="(coupon, couponIndex) in couponsList" :key="couponIndex">
          <view class="coupon-info u-flex" :class="tabsCurrent === 1 ? 'unavailable' : ''">
            <view class="absolute icon1" style="top: -16rpx;"></view>
            <view class="absolute icon1" style="bottom: -16rpx;"></view>

            <view class="coupon-left u-flex-1 u-line-1">
              <view class="coupon-title u-line-1">
                {{ coupon.title }}
              </view>
              <custom-price :price="coupon.amount" :textColor="'#FFFFFF'" :fontWeight="600" :size="60">
              </custom-price>
              <!-- <view class="coupon-title">
                满{{ coupon.amount }}元可用
              </view> -->
              <!-- <view class="u-padding-top-10" v-if="coupon.use_scope">
                仅限
                <text v-if="coupon.use_scope === 'ALL'">全平台</text>
                <text v-if="coupon.use_scope === 'CATEGORY'">品类</text>
                <text v-if="coupon.use_scope === 'SOME_GOODS'">部分商品</text>
                使用
              </view> -->
              <!-- <view class="u-padding-top-10" v-else>仅限 <nuxt-link :to="'/shop/' + coupon.seller_id" style="color: #fff">{{ coupon.seller_name }}</nuxt-link> 店铺使用</view> -->
              <!-- <view class="u-padding-top-10 u-line-1" v-else>
                仅限 <u-link :href="'/shop/' + coupon.seller_id" color="#FFFFFF">{{ coupon.seller_name }}</u-link> 店铺使用
              </view> -->
            </view>
            <view class="coupon-right u-text-center">
              <!-- <view class="coupon-title">副券</view> -->
              <view class="u-font-26">{{ coupon.create_time | date }}</view>
              <view>{{coupon.remark}}</view>
              <!-- <view class="u-font-26">至</view>
              <view class="u-font-26">{{ coupon.create_time | date }}</view> -->
            </view>
            <text class='i'></text>
            <text class='is-used'></text>
            <text class='is-overdue'></text>
          </view>
        </view>
      </mescroll-body>
    </view>

    <u-popup v-model="showPopup" mode="bottom" height="50%">
      <view class="popups">
        <view class="f-w-700 u-f-ac u-f-jsb popup_title">
          <view style="opacity: 0;"><u-icon name="close-circle"></u-icon></view>
          <view>爆款券转黄金券</view>
          <view><u-icon name="close-circle" size="40" @click="showPopup=false"></u-icon></view>
        </view>
        <view class="inputs">
          <view class="input_title" style="margin-bottom: 30rpx;">转换额度</view>
          <view class="inpupt u-f-ac">
            <view class="f-w-700" style="font-size: 46rpx;"></view>
            <u-input v-model="money" type="number" placeholder=" "></u-input>
          </view>
        </view>
        <view class="inputs" style="margin-top: 40rpx;">
          <view class="input_title">支付密码</view>
          <view class="inpupt u-f-ac">
            <!-- <view class="f-w-700" style="font-size: 46rpx;">￥</view> -->
            <u-input v-model="password" type="password" placeholder=" " height="50"></u-input>
          </view>
        </view>

        <view style="padding: 50rpx;">
          <u-button type="success" @click="putMallH2g">立即转换</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import * as API_Malls from '@/api/malls.js';
  import * as API_Members from '@/api/members.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
  import uviewTabs from "@/components/uview-tabs/u-tabs.vue"

  import md5Libs from "@/libs/function/md5";
  export default {
    components: {
      uviewTabs
    },
    mixins: [MescrollMixin],
    data() {
      return {
        customStyle: {
          backgroundColor: '#F4F5F7',
          width: '120rpx',
          height: '56rpx',
          color: '#FF2C2C',
          fontSize: '28rpx',
        },
        tabsList: [{
            name: '爆款券',
            value: 0
          },
          // {
          //   name: '门店专用券',
          //   value: 0
          // }
        ],
        tabsCurrent: 0,
        params: {
          page_no: 1,
          page_size: 10,
          asset: 4,
        },
        finished: false,
        couponsList: [], //补贴额度列表
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        },


        showPopup: false,
        money: '',
        password: '',

        hot_amount: 0,
      }
    },
    methods: {
      changeTabs(index) {
        this.tabsCurrent = index
        this.couponsList = []
        this.params.page_no = 1
        // this.params.asset = index + 1
        this.getCoupons()
      },
      //下拉刷新
      downCallback() {
        this.changeTabs(this.tabsCurrent)
      },
      //上拉加载
      upCallback(page) {
        this.params.page_no = page.num
        this.getCoupons()
      },
      // 收取奖金
      async getGrabBonus() {
        await API_Members.getGrabBonus()
        this.$u.toast('收取奖金成功！')
        this.couponsList = []
        this.params.page_no = 1
        this.getCoupons()
      },
      //获取补贴额度列表
      async getCoupons() {
        let response = await API_Members.getListPoint(this.params)
        console.log(response)
        const {
          data
        } = response
        this.couponsList.push(...data)
        setTimeout(() => {
          this.mescroll.endBySize(data.length, response.data_total)
        }, 500)
        let res = await API_Members.memberInfo()
        // this.tabsList[0].value = res.info.hot_amount
        this.hot_amount = res.info.hot_amount

        // API_Members.getCoupons(this.params).then(response => {
        //   const {
        //     data
        //   } = response
        //   this.couponsList.push(...data)
        //   setTimeout(() => {
        //     this.mescroll.endBySize(data.length, response.data_total)
        //   }, 500)
        // })
      },

      async putMallH2g() {
        this.showPopup = false
        uni.showModal({
          title: '再次提醒~',
          content: `尊敬的用户您好，您确认要爆款券转黄金券${this.money}元吗`,
          confirmText: '确定转换',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let res = await API_Malls.putMallH2g({
                amount: this.money,
                pwd: md5Libs.md5(this.password),
              })
              this.$u.toast('转换成功！')
              setTimeout(() => {
                this.downCallback()
              }, 1200)

            }
          }
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .popups {
    width: 100%;
    height: 100%;
    padding: 30rpx 50rpx;

    .popup_title {
      margin-bottom: 30rpx;
    }

    .inputs {
      border-bottom: 1px solid #ccc;

      .input_title {
        color: #888;
      }
    }
  }

  .coupons-container {
    /deep/.u-empty {
      margin-top: 100rpx !important;
    }

    .coupon-item {
      &.used {
        filter: grayscale(100%);

        .is-used {
          display: block !important;
        }
      }

      &.overdue {
        filter: grayscale(100%);

        .is-overdue {
          display: block !important;
        }
      }

      &.default {
        filter: grayscale(0%);
      }

      .coupon-info {
        position: relative;
        padding: 0 20rpx;
        margin: 20rpx;
        overflow: hidden;
        color: #FFFFFF;
        background: radial-gradient(transparent 0, transparent 10rpx, #FD5B00 10rpx);
        background-size: 30rpx 30rpx;
        background-position: 18rpx 6rpx;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 20rpx;
          right: 20rpx;
          z-index: -1;
          background-color: #FD5B00;
        }

        &.unavailable {
          background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10rpx, #7a7a7a 10rpx);
          background-size: 30rpx 30rpx;
          background-position: 18rpx 6rpx;

          &::before {
            background-color: #7a7a7a;
          }
        }

        .coupon-left {
          padding: 24rpx 20rpx 24rpx 10rpx;
          border-right: 4rpx dashed rgba(255, 255, 255, .3);
        }

        .coupon-right {
          padding: 20rpx 30rpx;

          .coupon-title {
            font-size: 50rpx;
          }
        }

        .i {
          position: absolute;
          left: 20%;
          top: 90rpx;
          height: 380rpx;
          width: 780rpx;
          background-color: rgba(255, 255, 255, .15);
          transform: rotate(-30deg);
        }

        .is-used,
        .is-overdue {
          display: none;
          position: absolute;
          z-index: 20;
          top: -30rpx !important;
          left: auto !important;
          right: -30rpx !important;
          width: 160rpx;
          height: 160rpx;
          background: url("") no-repeat;
          background-size: 100% !important;
          transform: rotate(15deg);
        }

        .is-overdue {
          background: url("");
        }
      }
    }
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 34rpx;
      margin-bottom: 10rpx;
    }

    >view:nth-of-type(2) {
      font-size: 60rpx;
    }
  }

  .icon1 {
    width: 30rpx;
    height: 30rpx;
    background-color: #fff;
    border-radius: 100%;
    right: 200rpx;
  }

  .coupons-container {
    background-color: #F4F5F7;
    border-radius: 40rpx 40rpx 0 0;
  }
</style>